<template>
    <view class="uni-list" style="height: 100%;">
        <!-- #ifdef APP  -->
        <cu-custom bgColor="bg-blue" :isBack="false">
            <block slot="content">消息</block>
        </cu-custom>
        <!-- #endif -->
        <!-- #ifdef H5  -->
        <cu-custom bgColor="bg-blue" :isBack="false">
            <block slot="content">消息</block>
        </cu-custom>
        <!-- #endif -->
        <!-- tools -->
        <view>
            <view class="cu-list grid col-3 tools align-center justify-center">
                <view class="flex align-center justify-center" @click="f_fans">
                    <image src="../../static/msg/fans.png" mode="widthFix"></image>
                    <text>粉丝</text>
                </view>
                <view class="flex align-center justify-center" @click="f_zanlist">
                    <image src="../../static/msg/zan.png" mode="widthFix"></image>
                    <text>赞</text>
                </view>
                <!-- <view class="flex align-center justify-center">
                    <image src="../../static/msg/at.png" mode="widthFix"></image>
                    <text>@我的</text>
                </view> -->
                <view class="flex align-center justify-center" @click="f_comment">
                    <image src="../../static/msg/comment.png" mode="widthFix"></image>
                    <text>评论</text>
                </view>
                <!-- <view v-if="$cfg.switch()" class="flex align-center justify-center" @click="f_txl">
                    <image src="../../static/msg/txl.png" mode="widthFix"></image>
                    <text>通讯录</text>
                </view> -->
            </view>
            <u-empty text="暂无数据" mode="list" v-if="dataList.length==0" :style="{'height':cheight+'px'}"
                style="height: 100%;"></u-empty>
            <view class="uni-list-cell" v-else hover-class="uni-list-cell-hover" v-for="(item,index) in dataList"
                @click="jumpToTargetView(item)">
                <view class="uni-media-list ">
                    <view class="uni-media-list-logo">
                        <image :lazy-load="true" :src="item.showUserUrl" style="border-radius: 50%;" mode="aspectFill">
                        </image>
                        <!-- <image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg"></image> -->
                        <text class="sp" v-show="item.unReadNum>0">{{item.unReadNum}}</text>
                    </view>
                    <view class="uni-media-list-body ">
                        <view class="uni-media-list-text-top uni-ellipsis">{{item.showUserName}}</view>
                        <view class="uni-media-list-text-bottom uni-ellipsis" v-show="item.messageType=='0'">
                            {{item.message}}
                        </view>
                        <view class="uni-media-list-text-bottom uni-ellipsis" v-show="item.messageType=='1'">
                            [图片]
                        </view>
                    </view>
                    <text style="color: #8f8f94;">{{item.createTime}}</text>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
    import {
        mapMutations,
        mapState,
        mapGetters
    } from 'vuex';
    export default {
        data() {
            return {
                cheight: 0,
                headerbarheight: 0,
                conheight: 0,
                socketTask: null,
                // 确保websocket是打开状态
                is_open_socket: false,
                dataList: [],
                unReadNum: 0
            }
        },
        components: {
        },
        onShow() {
            var t = this
            t.loadgetChatUnReadNum();
            t.loadmessagelist();
            t.connectSocketInit();
        },
        mounted() {
            var t = this
            const query = uni.createSelectorQuery().in(this);
            // #ifdef APP
            query.select('.cu-bar').boundingClientRect(data => {
                this.headerbarheight = data.height
            }).exec();
            // #endif
            // #ifdef H5
            query.select('.cu-bar').boundingClientRect(data => {
                this.headerbarheight = data.height
            }).exec();
            // #endif
            query.select('.tools').boundingClientRect(data => {
                this.conheight = data.height
            }).exec();
            t.cheight = t.$cfg.h - t.headerbarheight - t.conheight
        },
        beforeDestroy() {
            this.closeSocket();
        },
        methods: {
            f_fans() {
                this.f.nav('/chartPackages/pages/Fans/Fans')
            },
            f_txl() {
                this.$refs.addressBook.toggleMask();
                // this.f.nav('/pages/addressBook/addressBook')
            },
            f_comment() {
                this.f.nav('/chartPackages/pages/commentList/commentList')
            },
            f_zanlist() {
                this.f.nav('/chartPackages/pages/zanList/zanList')
            },

            loadgetChatUnReadNum() {
                var t = this
                t.$api.req_post('staff_grow/staff/stChatMessage/getChatUnReadNum', {}, 'json', false).then(res => {
                    if (res.success) {
                        t.unReadNum = res.result.unReadNum
                        if (res.result.unReadNum > 0) {

                            uni.setTabBarBadge({
                                index: 1,
                                text: String(res.result.unReadNum)
                            })
                        } else {
                            uni.removeTabBarBadge({
                                index: 1
                            })
                        }
                    }
                })
            },
            closeSocket() {
                this.socketTask.close({
                    success(res) {
                        this.is_open_socket = false;
                        console.log("关闭成功", res)
                    },
                    fail(err) {
                        console.log("关闭失败", err)
                    }
                })
            },
            connectSocketInit() {
                var t = this
                // 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
                t.socketTask = uni.connectSocket({
                    // 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
                    url: `${t.$cfg.wsUri}${t.$cfg.user().userNum}`,
                    success(data) {
                        console.log("websocket连接成功");
                    },
                });

                t.socketTask.onOpen((res) => {
                    t.is_open_socket = true;
                    t.socketTask.onMessage((res) => {
                        // console.log("收到服务器内容：" + res.data);
                        const b = JSON.parse(res.data);
                        t.loadgetChatUnReadNum();
                        t.loadmessagelist();
                        console.log(b);
                        var a = {}
                        if (b.type == "message") {
                            a = b.data
                        }
                    });
                })
                // 这里仅是事件监听【如果socket关闭了会执行】
                t.socketTask.onClose(() => {
                    console.log("已经被关闭了")
                })
            },
            ...mapMutations(['setchartuserinfo']),
            loadmessagelist() {
                var t = this
                var obj = {
                    pageNo: 1,
                    pageSize: 100,
                }
                t.$api.req_post('staff_grow/staff/stChatMessage/pageForMessage', obj, 'form', false).then(res => {
                    if (res.success) {
                        this.dataList = res.result.records
                    }
                })
            },
            jumpToTargetView(item) {
                this.setchartuserinfo(item)
                this.f.nav('/chartPackages/pages/chart/chart')
            },
        }
    }
</script>
<style lang="scss" scoped>
    .msg {
        width: 100vw;
        height: 100vh;
        /* background-color: #161823; */
    }

    .tools {
        view {
            display: flex;
            flex-direction: column;
        }

        image {
            width: 100upx;
            height: 100upx;
            display: flex;
        }

        text {
            color: #161823;
            padding-top: 10rpx;
        }
    }

    .cu-list.grid {
        position: relative;
        /* background-color: #161823; */
        padding: 30upx 0;
        color: #FFFFFF;
        /* transform: scaleY(0.2); */
        /* border-bottom: 1px solid $uni-border-color; */
    }

    .cu-list.grid::after {
        position: absolute;
        z-index: 3;
        right: 0;
        bottom: 0;
        left: 0;
        height: 1px;
        content: '';
        -webkit-transform: scaleY(0.2);
        transform: scaleY(0.2);
        background-color: #c8c7cc;
    }

    .cu-list+.cu-list {
        margin-top: 0;
    }

    .cu-list.menu-avatar>.cu-item {
        /* background-color: #161823; */
        border-color: rgba(110, 111, 117, 0.5);
    }
</style>